<@tools.diyMetadata itemType='region' itemId=id><#assign a=object/></@tools.diyMetadata>
<@tools.diyRegionData id=id categoryId=categoryId><#assign data=object/></@tools.diyRegionData>
<form method="post" autocomplete="off" action="cmsDiy/save?rel=diyConfigBox&navTabId=cmsPage/diy" class="pageForm required-validate" onsubmit="return validateCallback(this, navTabAjaxDone);">
    <input type="hidden" name="_csrf" value="<@tools.csrfToken admin=true/>"/>
    <input type="hidden" name="categoryId" value="${categoryId!}"/>
    <div class="formBar card">
        <ul>
            <li><button type="submit" class="buttonActive" title="ctrl+s"<#if id?has_content> lock-url="common/lock?itemType=region&itemId=${(id?url)!}<#if categoryId?has_content>_${categoryId}</#if>" close-url="common/unlock?itemType=region&itemId=${(id?url)!}<#if categoryId?has_content>_${categoryId}</#if>"</#if>><@t.page 'button.save'/></button></li>
        </ul>
    </div>
    <div class="card">
        <div class="pageFormContent" layoutH>
            <dl class="miscSortDrag nowrap" data-result="textarea[name=diydata]" drag-rel="dd .sortDrag" data-id="region" data-duplicate="1">
                <dt>
                    <fieldset>
                        <legend><@t.page 'layout'/></legend>
                        <@tools.diyMetadataList itemType="layout" region=a.id showGlobal=true>
                        <div class="itemBox">
                            <#list list as a>
                                <div class="dragItem icon-move icon-large" data-id="${a.id}" data-type="layout" title="${a.name!}">
                                    ${a.name!} (${a.count})<span class="close">X</span>
                                    <div class="ctl-label">
                                        <@tools.includeLayout id=a.id>
                                            <div class="sortDrag" data-over-sort="true" data-accept="module"><@t.page 'drag_module_here'/></div>
                                        </@tools.includeLayout>
                                    </div>
                                </div>
                            </#list>
                        </div>
                            <#if list?has_content>
                                <style>
                                <#list list as a>
                                    <#if a.style?has_content>${getLayoutStyle(a.style,'.diy-layout')!}</#if>
                                </#list>
                                </style>
                            </#if>
                        </@tools.diyMetadataList>
                    </fieldset>
                    <fieldset>
                        <legend><@t.page 'module'/></legend>
                    <@tools.diyMetadataList itemType="module" region=a.id showGlobal=true>
                        <div class="itemBox">
                            <#list list as a>
                        <div class="dragItem icon-move icon-large" data-id="${a.id}" data-type="module" title="${a.name!}">
                            ${a.name!}<span class="close">X</span>
                            <span class="ctl-label">
                                <input data-name="name" type="text" class="required" value="<@cms.category id=categoryId>${object.name}-</@cms.category>${a.name}"/>
                                <#if a.place?has_content && !a.clone>
                                    <@tools.placeMetadata path=a.place>
                                        <#if (object.metadataExtendList)?has_content>
                                            <a class="button" href="cmsPlace/metadata.html?path=${a.place?url}" target="ajax" rel="diyConfigBox">${(object.alias)!a.place}</a>
                                        </#if>
                                        <#if 0 lt ((object.size)!0)>
                                           <a class="button" href="cmsPlace/dataList.html?path=${a.place?url}" target="navTab" rel="cmsPlace/dataList"><@t.page 'place_data'/>:${(object.alias)!}(${object.size})</a>
                                        </#if>
                                    </@tools.placeMetadata>
                                </#if>
                            </span>
                            <#if a.cover?has_content>
                            <div class="ctl-label">
                                <img src="${(getUrl(a.cover))!}"/>
                            </div>
                            </#if>
                        </div>
                            </#list>
                        </div>
                    </@tools.diyMetadataList>
                    </fieldset>
                </dt>
                <dd>
                    <fieldset>
                        <legend><@cms.category id=categoryId>${object.name}-</@cms.category>${a.name}</legend>
                        <div class="sortDrag diy-layout" data-over-sort="true" data-accept="layout" data-id="${a.id}" data-parent="region">
                            <@t.page 'drag_layout_here'/>
                            <#if (data.layoutList)?has_content>
                                <#list data.layoutList as layoutdata>
                                    <@tools.diyMetadata itemType="layout" itemId=layoutdata.id>
                                        <div class="dragItem" data-id="${object.id}" data-type="layout">
                                            ${object.name!}<span class="close">X</span>
                                            <div class="ctl-label">
                                                <@tools.includeLayout id=object.id>
                                                    <div class="sortDrag" data-over-sort="true" data-accept="module">
                                                        <@t.page 'drag_module_here'/>
                                                        <#if layoutdata.moduleList?has_content && layoutdata.moduleList[index]?has_content>
                                                            <#list layoutdata.moduleList[index] as moduleData>
                                                                <div class="dragItem" data-id="${moduleData.id}" data-type="module" >
                                                                    ${moduleData.name}<span class="close">X</span>
                                                                    <span class="ctl-label">
                                                                        <@tools.placeMetadata path=moduleData.place>
                                                                            <#if (object.metadataExtendList)?has_content>
                                                                                <a class="button" href="cmsPlace/metadata.html?path=${moduleData.place?url}" target="ajax" rel="diyConfigBox">${(object.alias)!moduleData.place}</a>
                                                                            </#if>
                                                                            <#if 0 lt ((object.size)!0)>
                                                                                <a class="button" href="cmsPlace/dataList.html?path=${moduleData.place?url}" target="navTab" rel="cmsPlace/dataList" title="<@t.page 'place_data'/>:${(object.alias)!}"><@t.page 'place_data'/>(${object.size})</a>
                                                                            </#if>
                                                                        </@tools.placeMetadata>
                                                                        <input data-name="name" type="hidden" value="${moduleData.name}"/>
                                                                        <input data-name="place" type="hidden" value="${moduleData.place!}"/>
                                                                        <input data-name="fragment" type="hidden" value="${moduleData.fragment!}"/>
                                                                    </span>
                                                                    <@tools.diyMetadata itemType="module" itemId=moduleData.id;module>
                                                                        <#if module.cover?has_content>
                                                                            <div class="ctl-label">
                                                                                <img src="${(getUrl(module.cover))!}" alt="${moduleData.name}"/>
                                                                            </div>
                                                                        </#if>
                                                                    </@tools.diyMetadata>
                                                                </div>
                                                            </#list>
                                                        </#if>
                                                    </div>
                                                </@tools.includeLayout>
                                            </div>
                                        </div>
                                    </@tools.diyMetadata>
                                </#list>
                            </#if>
                        </div>
                        <textarea name="diydata" class="hide"></textarea>
                    </fieldset>
                </dd>
            </dl>
        </div>
    </div>
</form>